<script setup>
import { ref } from 'vue';

const tableData = ref({
  tHead: [
    {
      key: 'id',
      text: 'No.',
      editable: false
    },
    {
      key: 'name',
      text: 'Name',
      editable: false
    },
    {
      key: 'age',
      text: 'Age',
      editable: false
    },
    {
      key: 'chinese',
      text: 'Chinese',
      editable: true
    },
    {
      key: 'math',
      text: 'Math',
      editable: true
    },
    {
      key: 'english',
      text: 'English',
      editable: true
    }
  ],
  tBody: [
    {
      id: 1,
      name: 'zhangsan',
      age: 18,
      chinese: 119,
      math: 99,
      english: 130
    },
    {
      id: 2,
      name: 'lisi',
      age: 19,
      chinese: 80,
      math: 89,
      english: 100
    },
    {
      id: 3,
      name: 'wangwu',
      age: 20,
      chinese: 123,
      math: 111,
      english: 116
    }
  ]
});

const data = [
  {
    title: '华为',
    data: [
      {
        id: 1,
        phone_name: 'Mate 40 Pro',
        disabled: false
      },
      {
        id: 2,
        phone_name: 'P40 Pro',
        disabled: true
      },
      {
        id: 3,
        phone_name: 'P50 Pro',
        disabled: false
      },
      {
        id: 4,
        phone_name: 'Mate Xs 2',
        disabled: false
      }
    ]
  },
  {
    title: '小米',
    data: [
      {
        id: 5,
        phone_name: '12 Pro',
        disabled: true
      },
      {
        id: 6,
        phone_name: '12s Ultra',
        disabled: true
      },
      {
        id: 7,
        phone_name: '12s',
        disabled: false
      },
      {
        id: 8,
        phone_name: 'Civi 1s',
        disabled: false
      }
    ]
  },
  {
    title: 'iPhone',
    data: [
      {
        id: 9,
        phone_name: '13 mini',
        disabled: false
      },
      {
        id: 10,
        phone_name: '13',
        disabled: false
      },
      {
        id: 11,
        phone_name: '13 Pro',
        disabled: false
      },
      {
        id: 12,
        phone_name: '13 Pro Max',
        disabled: true
      }
    ]
  }
];

const editData = ({ index, key, value, text }, removeInput) => {
  if (tableData.value.tBody[index][key] != value) {
    const cfm = window.confirm(`
      您要确定将数据下标为${index}项, ${text}字段的内容修改为"${value}"吗？
    `);

    if (cfm) {
      tableData.value.tBody = tableData.value.tBody.map((item, idx) => {
        index === idx && (item[key] = value);
        return item;
      });
    } else {
      removeInput();
    }
  }
};
</script>

<template>
  <!-- <MyTable :data="tableData" @submit="editData"></MyTable> -->
  <MyTransfer :data="data" right-title="已选择机型"></MyTransfer>
</template>
